<!DOCTYPE html>
<html>
<head>
    <title>健身器材</title>
    <meta charset="UTF-8">
    <style>
        thead {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        tbody {
            text-align: center;
        }

        td, th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        th {
            background-color: #070707;
            color: white;
        }

        .content {
            width: 200px; /* 假设容器宽度为 200px */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #section {
            width: 100px;
            height: 25px;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>
<body style="display: flex;justify-content: center">
<div>
    <table>

        <thead>

        <tr>
            <th>编号</th>
            <th>器材名称</th>
            <th>器材单价</th>
            <th>器材数量</th>
            <th>状态</th>
            <th>采购时间</th>
            <th>操作</th>
        </tr>

        </thead>

        <tbody id="data-body">
        <!-- 表格数据 -->
        </tbody>
        <h3 style="width: 60px ;cursor:pointer;text-align: center; background-color: black; color: #ffffff;padding: 2px;line-height: 2;border-radius: 4px"  onclick="add()">添加</h3>
    </table>

</div>
<script src="js/jquery.js"></script>

<script>
    // 使用 AJAX 发起 GET 请求以获取信息并更新页面显示
    $.ajax({
        method: "GET",
        url: `/FitnessEquipmentServlet?sorttype=list`, // 获取信息的 API 地址
        dataType: "json",
        success: function (data) {
            $("#data-body").empty(); // 清空内容

            data.forEach(function (post) {
                addTableRow(post); // 将每个信息添加到表格中
            });
        },
        error: function () {
            alert("获取信息失败，请重试。"); // 如果请求失败，弹出提示信息
        }
    });

    // 处理删除操作的函数
    function ajaxDelete(id) {
        if (confirm("确定要删除吗？")) { // 弹出确认对话框，确认删除

            $.ajax({
                url: `/FitnessEquipmentServlet?sorttype=delete&id=${id}`,
                type: "GET",
                success: function (response) {
                    if (response){

                    alert("删除成功"); // 删除成功后弹出提示信息
                    location.reload(); // 刷新页面
                    }

                },
                error: function (xhr, status, error) {
                    alert("删除失败"); // 删除失败时弹出提示信息
                }
            });
        }
    }

    // 处理添加操作的函数跳转到更新页面进行添加
    function add() {
        location.href = 'add.html'; // 跳转到添加页面
    }

    // 添加一行信息到表格中
    function addTableRow(post) {
        var tableRow = `
    <tr>
      <td>${post.id}</td>
      <td>${post.name}</td>
      <td>${post.price}</td>
      <td>${post.count}</td>
      <td>${post.status==0?"未投入使用":"投入使用"}</td>
      <td>${post.buy_time}</td>

      <td style="cursor:pointer" onclick="ajaxDelete(${post.id})">删除</td>
    </tr>`;
        $("#data-body").append(tableRow); // 将新行添加到表格的主体部分
    }
</script>
</body>
</html>